<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <head>
        <title>田氏电影 - 田氏订票</title>
        <link rel="stylesheet" href="//s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/common.6b1d782c.css"/>
        <link rel="stylesheet" href="//s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/home-index.fce66dcb.css"/>
        <script crossorigin="anonymous" src="//s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/stat.88d57c80.js"></script>
    </head>

    <%--    引入layui样式--%>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css">
    <%--    1. 引入bootstrap.css--%>
    <link rel="stylesheet" href="/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <%--    2. 引入自定义的css文件--%>
    <link rel="stylesheet" href="/css/nav.css">
</head>

<body>
<div class="header">
    <div class="header-inner">
        <div class="city-container" data-val="{currentcityid:90 }">
            <div class="city-name">
                大庆
                <span class="caret"></span>
            </div>
        </div>

        <div class="nav">
            <ul class="navbar">
                <li><a href="/index.jsp" data-act="home-click" >首页</a></li>
                <li><a href="/movie/index" data-act="movies-click" class="active">订票</a></li>
                <li><a href="/index2.jsp" data-act="cinemas-click" >影院</a></li>
                <li><a href="/index4.jsp" data-act="board-click" >榜单</a></li>
                <li><a> </a></li>
                <li><a> </a></li>
                <li><a> </a></li>
                <li><a> </a></li>
                <li><a> </a></li>
            </ul>
        </div>
        <li>
            <form class="navbar-form navbar-left" role="search">
                <div class="input-group">
                    <input value="${name}" type="text" id="search_input" class="form-control">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" onclick="search_name()">search</button>
                    </span>
                </div>
            </form>
        </li>
        <script>
            // 搜索按钮完成的功能
            function search_name(){
                //1. 获取搜索的文本框中输入的数据
                let search_input_value = document.getElementById("search_input").value;
                //2. 发送参数到后台
                //window.localtion='url?参数名1=参数值2&参数名2=参数值2&参数名3=参数值4'
                window.location='/movie/index?name='+search_input_value;
            }
        </script>

        <div class="user-info">
            <div class="user-avatar J-login">
                <img class="nav_img" src="/imgs/田氏影业logo.png">
                <span class="caret"></span>
                <ul class="user-menu no-login-menu">
                    <li><a href="/user/index3" data-act="board-click" >登录</a></li>
                    <li><a href="/nav.jsp" data-act="board-click" >关于我们</a></li>

                    <c:if test="${user!=null}">

                        <li><a href="/cart/index">我的订单</a></li>
                        <li><a href="/user/exit">退出</a></li>
                    </c:if>

                </ul>
            </div>
        </div>
    </div>
</div>

<%--    jsp中如何获取后端request作用域中的数据--%>
<%--    使用到的是EL表达方式 - ${key}--%>

<%--    首页内容begin--%>
<div class="container-fluid">
    <div class="row">
        <p></p>
        <br />
        <br />
        <br />
        <br />
        <br />
        <p></p>
        <%--            ${productList} - 根据后台放在request作用域中的key来获取的集合对象--%>
        <%--            var = "p" 此处的p代表的就是当前正在被迭代和使用的集合中的某个对象--%>
        <c:forEach items="${movieList}" var="p">
            <div class="col-sm-3 col-md-2">
                <div class="thumbnail">
                    <img src="/imgs/${p.img}"
                         alt="通用的占位符缩略图">
                    <div class="caption">
                            <%--                            EL支持OGNL语法 - 对象导航语言--%>
                        <h3>${p.name}</h3>
                        <p>${p.type}</p>
                                <h4>￥ ${p.price}</h4>
                                <p class="remark">上映时间：${p.showtime}</p>
                    </div>
                    <div style="text-align: right;margin-right: 5px">
                        <span onclick="add_cart(${p.id})" class="glyphicon glyphicon-shopping-cart text-danger"></span>
                    </div>
                </div>
            </div>
        </c:forEach>
    </div>
</div>
<%--    首页内容end--%>

<%--    引入layui - js--%>
<script type="text/javascript" src="/plugins/layui/layui.js"></script>
<%--    2. 先引入jquery.min.js--%>
<script type="text/javascript" src="/plugins/jquery/jquery.min.js"></script>
<%--    3. 引入bootstrap.js文件--%>
<script type="text/javascript" src="/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<script>
    //添加购物车
    function add_cart(pid){
        //需要将产品的id发送到后端
        //1. window.location='url?key1=value1&key2=value2'
        //2. ajax方式 - 传送的是json数据 - {key:value,key2:value2}
        $.get('/cart/add',{id:pid},function(data){
            //data - 是后端返回过来的json数据
            console.log(data);
            if(data.code=="200"){
                //alert("添加购物成功!");
                layer.msg('添加购物车成功', {icon: 1});
            }else{
                alert("添加购物车失败!");
            }
        });
    }
</script>
</body>
</html>
